import { defineComponent, ref, reactive } from "vue";
import Popup from "@/components/Popup/Popup";
import styles from "./Detail.module.less";
import useTableHook from "@/common/hooks/useTableHook";
import TableSection from "@/components/TableSection/TableSection";
import Toolbar from "@/components/Toolbar/Toolbar";
import baseStatusDict from "@/common/dicts/baseStatusDict";
import Operation from "@/components/Operation/Operation";
export default defineComponent({
  setup(props, { expose }) {
    const tableHook = useTableHook();
    const popupRef = ref(null as any);
    const state = reactive({
      id: null,
    })
    const toolbar = ref([
      {
        el: () => <a-button type="primary" onClick={() => {
          tableHook.state.dataSource.push({
            id: null,
            key: null,
            value: null,
            name: null,
            status: 1,
          })
        }}>新增</a-button>
      },
    ])
    const getList = () => {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            data: [{
              id: 1,
              key: "HW",
              value: "1",
              name: "货物",
              status: 1,
            }]
          })
        }, 1000)
      })
    }
    const getDetail = () => {
      tableHook.setSyncDataSource(getList);
    }
    const open = async ({ id }) => {
      state.id = id;
      getDetail();
      popupRef.value.open();
    }
    const close = () => {
      popupRef.value.close();
    }
    expose({
      open,
      close,
    })
    tableHook.defineColumns([
      {
        title: "键(key)",
        dataIndex: "key",
        align: "center",
        width: "180px",
      },
      {
        title: "值(value)",
        dataIndex: "value",
        align: "center",
        width: "180px",
      },
      {
        title: "名称",
        dataIndex: "name",
        align: "center",
        width: "180px",
      },
      {
        title: "状态",
        dataIndex: "status",
        align: "center",
        width: "60px",
      },
      {
        title: "操作",
        dataIndex: "operation",
        align: "center",
        width: "150px",
      },
    ])
    return () => (
      <Popup ref={popupRef} width="800px" oriState={state} class={styles.detail}>
        <div class={styles.title}>明细记录</div>
        <TableSection
          v-slots={{
            toolbar: () => <Toolbar v-model:config={toolbar.value} />,
            table: () => <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              columns={tableHook.state.columns}
              dataSource={tableHook.state.dataSource}
              loading={tableHook.state.loading}
              rowKey="id"
              v-slots={{
                bodyCell: ({ column, record, index, text }) => {
                  if (column.dataIndex === 'key' && !record.id) {
                    return <a-input style={{ width: "120px", textAlign: "center" }} v-model:value={record.key} />
                  }
                  if (column.dataIndex === 'value' && !record.id) {
                    return <a-input style={{ width: "120px", textAlign: "center" }} v-model:value={record.value} />
                  }
                  if (column.dataIndex === 'name' && !record.id) {
                    return <a-input style={{ width: "120px", textAlign: "center" }} v-model:value={record.name} />
                  }
                  if (column.dataIndex === 'status') {
                    const status = baseStatusDict.find(x => x.value === record.status);
                    return <span class={`${status?.type}-font`}>{status?.label}</span>;
                  }
                  if (column.dataIndex === 'operation') {
                    return <div class={styles.operationBox}>
                      <Operation btns={record.id ? [
                        () => <a-button size="small" type="link" onclick={() => {

                        }}>{record.status === 1 ? "禁用" : "启用"}</a-button>
                      ] : [
                        () => <a-button size="small" type="link" onclick={() => {
                          getDetail();
                        }}>保存</a-button>,
                        () => <a-button size="small" type="link" onclick={() => {
                          tableHook.state.dataSource.splice(index, 1);
                        }}>取消</a-button>
                      ]} />
                    </div>
                  }
                }
              }}
            />
          }}
        />
      </Popup>
    )
  }
})